<template>
	<view>
		<view class="solart_list flex_row_start_center">
			<view class="solart_list_item flex_row_center_center" >
				<view class="solart_list_item_module" @click="natTo('立春')">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E7%AB%8B%E6%98%A5.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>立春</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center"  @click="natTo('雨水')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E9%9B%A8%E6%B0%B4.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>雨水</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center"  @click="natTo('惊蛰')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E6%83%8A%E8%9B%B0.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>惊蛰</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center"  @click="natTo('春分')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E6%98%A5%E5%88%86.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>春分</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center"  @click="natTo('清明')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E6%B8%85%E6%98%8E.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>清明</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center"   @click="natTo('谷雨')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E8%B0%B7%E9%9B%A8.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>谷雨</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center"   @click="natTo('立夏')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E7%AB%8B%E5%A4%8F.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>立夏</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center"   @click="natTo('小满')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%B0%8F%E6%BB%A1.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>小满</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center"   @click="natTo('芒种')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E8%8A%92%E7%A7%8D.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>芒种</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center"   @click="natTo('夏至')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%A4%8F%E8%87%B3.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>夏至</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('小暑')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%B0%8F%E6%9A%91.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>小暑</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('大暑')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%A4%A7%E6%9A%91.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>大暑</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('立秋')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E7%AB%8B%E7%A7%8B.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>立秋</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('处暑')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%A4%84%E6%9A%91.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>处暑</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('白露')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E7%99%BD%E9%9C%B2.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>白露</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('秋分')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E7%A7%8B%E5%88%86.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>秋分</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('寒露')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%AF%92%E9%9C%B2.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>寒露</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('霜降')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E9%9C%9C%E9%99%8D.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>霜降</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('立冬')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E7%AB%8B%E5%86%AC.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>立冬</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('小雪')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%B0%8F%E9%9B%AA.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>小雪</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('大雪')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%A4%A7%E9%9B%AA.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>大雪</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('冬至')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%86%AC%E8%87%B3.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>冬至</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('小寒')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%B0%8F%E5%AF%92.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>小寒</view>
				</view>
			</view>
			<view class="solart_list_item flex_row_center_center" @click="natTo('大寒')">
				<view class="solart_list_item_module">
					<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/%E5%A4%A7%E5%AF%92.jpg" mode="aspectFit" class="solart_list_image"></image>
					<view>大寒</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	
	export default {
		data(){
			return{
				
			}
		},
		onLoad(){},
		methods:{
			natTo(params){
				// 要跳转的页面路径
				const url ='/pages/moreModule/solarterms';
				
				// // 跳转页面并传递对象参数
				uni.navigateTo({
				  url: `${url}?params=${params}`
				});
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		width: 750rpx;
		padding-top: 4rpx;
		background-color: #f2f2f2;
	}
	.solart_list{
		margin: 0 16rpx;
		padding:30rpx 15rpx;
		border-radius: 30rpx;
		flex-wrap: wrap;
	}
	.solart_list_item{
		width: 154rpx;
		height: 154rpx;
		border: 4rpx solid #88b7ff;
		background-color: #fff;
		margin-right: 24rpx;
		margin-bottom: 16rpx;
		border-radius: 30rpx;
		
		&:nth-child(4n){
			margin-right: 0;
		}
		
		.solart_list_item_module{
			text-align: center;
			font-size: 22rpx;
		}
	}  
	.solart_list_image{
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}
</style>